<!DOCTYPE html>
<html ng-app="actionTest">
  <head>
    <meta charset="utf-8">
    <title>Action Sheet</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
    <style>
      .row .col > div {
        width: 100%;
        height: 80px;
      }

    </style>
    <script src="../../../../dist/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="ActionCtrl">
    <ion-content>
      <div class="row">
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
        <div class="col">
          <div style="background-color: #eee" ng-click="show()">
          </div>
        </div>
      </div>

      <button ng-click="show()" class="button">Show</button>

    </ion-content>
    <script>
      angular.module('actionTest', ['ionic', 'ngAnimate'])

      .controller('ActionCtrl', function($scope, $ionicActionSheet) {
        $scope.show = function() {
          $ionicActionSheet.show({
            buttons: [
              { text: 'Share <i class="icon ion-beaker"></i>' },
              { text: 'Move <i class="icon ion-person"></i>' },
            ],
            destructiveText: 'Delete <i class="icon ion-minus"></i>',
            titleText: 'Modify your album <i class="icon ion-android-book"></i>',
            cancelText: 'Cancel <i class="icon ion-no-smoking"></i>',
            cancel: function() {
              console.log('CANCELLED');
            },
            buttonClicked: function(index) {
              console.log('BUTTON CLICKED', index);
              return true;
            },
            destructiveButtonClicked: function() {
              console.log('DESTRUCT');
              return true;
            }
          });
        };
       });
    </script>
  </body>
</html>
